"use client";

import { usePathname, useRouter } from "next/navigation";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLanguageStore } from "@/store/languageStore"; // 使用 zustand 的语言状态管理

export default function Root({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter(); // 用于路由跳转
  const { changeLanguage, language } = useLanguageStore(); // 从 zustand 获取 changeLanguage 方法
  const { i18n } = useTranslation();

  useEffect(() => {
    // 如果用户访问的是根路径（"/"），根据浏览器语言跳转到对应的语言路径
    if (pathname === "/") {
      const browserLanguage = navigator.language;

      // 根据浏览器语言设置语言并跳转
      if (browserLanguage.startsWith("zh")) {
        if (language !== "zh-CN") {
          changeLanguage("zh-CN");
          i18n.changeLanguage("zh-CN");
          router.replace("/zh-CN"); // 使用 replace 避免污染浏览历史
        }
      } else {
        if (language !== "en") {
          changeLanguage("en");
          i18n.changeLanguage("en");
          router.replace("/en"); // 使用 replace 避免污染浏览历史
        }
      }
    }
  }, [pathname, changeLanguage, language, i18n, router]);

  return <>{children}</>;
}
